<template>
  <div>
    <div class="type">
      <label for="">操作模块</label
      ><input
        @focus="focus"
        @blur="blur"
        class="searchInput"
        type="text"
        placeholder="全部"
        v-model="type"
      />
      <div @click="flag = !flag" class="pic">
        <img :src="imgurl" alt="" />
      </div>
      <ul v-show="flag === true" class="options">
        <!-- <li v-for="item in options" :key="item">
          {{ item }}
          <ul v-show="flag2 === true" class="options optionsChild">
            <li v-for="item in options" :key="item" @click="choice(item)">
              {{ item }}
            </li>
          </ul>
        </li> -->
        <li
          v-for="(item, index) in options"
          @click.stop="choice(item.label)"
          :key="item.id"
        >
          {{ item.label }}

          <ul v-if="item.children" class="options two none">
            <li
              v-for="(items,ind) in item.children"
              @click.stop="choice(items.label, index)"
              :key="items.id"
            >
              {{ items.label }}

              <ul v-if="items.children" class="options two none">
                <li
                  v-for="a in items.children"
                  :key="a.id"
                  @click.stop="choice(a.label, index, ind)"
                >
                  {{ a.label }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/dropDown.png'
import imgSrc2 from '@/assets/pullUp.png'
export default {
  data () {
    return {
      flag: false,
      options: [],
      flag2: false,
      type: '全部'
    }
  },
  computed: {
    imgurl () {
      if (this.flag === false) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }
  },
  watch: {
    type: {
      handler (val) {
        if (val === '全部') {
          val = ''
        }
        this.$emit('operation', val)
      }
    }
  },
  mounted () {
    this.getOperationList()
  },
  methods: {
    getOperationList () {
      this.$store.dispatch('systemManage/getOperationList').then(res => {
        this.options = [{ id: '全部', label: '全部' }, ...res.data]
      }).catch(res => {
        this.$message({
          type: 'error',
          message: res,
          duration: 1000
        })
      })
    },
    choice (val, firstIndex, secondIndex) {
      let type = val
      if (this.options[firstIndex]) {
        if (this.options[firstIndex].children && this.options[firstIndex].children[secondIndex]) {
          type = this.options[firstIndex].label + '/' + this.options[firstIndex].children[secondIndex].label + '/' + val
        } else {
          type = this.options[firstIndex].label + '/' + val
        }
      }
      this.type = type
      this.flag = false
    },
    focus () {
      this.flag = true
      if (this.type === '全部') {
        this.type = ''
      }
    },
    blur () {
      setTimeout(() => {
        if (!this.type) {
          this.type = '全部'
        }
        this.flag = false
      }, 200)
    },
    reset () {
      this.type = '全部'
    }
  }
}
</script>

<style lang="scss" scoped>
.type {
  label {
    margin-right: 12px;
  }
  .options {
    li {
      position: relative;
      &:hover {
        & > ul {
          display: block;
        }
      }
    }
  }
  .two {
    z-index: 1000;
    width: 180px;
    top: 0;
    position: absolute;
    right: -180px;
  }
  .none {
    display: none;
  }
}
</style>
